<!DOCTYPE html>
<html>
    <head>
        <title>AudioRecorder Example</title>
        <script type="text/javascript" src="../build/release/audiorecorder.js"></script>
        <script type="text/javascript">
// Configure the audio recorder
var config = {
    'worker_path': '../build/release/worker.js'
};

var clips = [];

function initClicked() {
    AudioRecorder.init(config);
}

function createClicked() {
    var newClip = Clip.create();
    clips.push(newClip);

    renderClips();
}

function recordClicked() {
    AudioRecorder.record();
    if (computedState.noneSelected) {
        clips.push(AudioRecorder.getClip());
    }
    renderClips();
}

function callback() {
}

function stopRecordingClicked() {
    AudioRecorder.stopRecording(callback);
}

function stopPlayingClicked() {
    AudioRecorder.stopPlaying();
}

var addDownloadLink = function(clip, name) {
    var file = FileHandler.speexFile(clip.samples);
    var filename = name + ".ogg";
    var sel = ".downloads";
    var mimetype = "audio/ogg";

    var url = "data:" + mimetype + ";base64," + btoa(file);
    var container = document.querySelector(sel);
    var KB = Math.round(file.length / 1024.0 * 100) / 100;
    var anchor =  "<div><a download=\"" + filename + "\" href=\"" +
        url + "\">" + filename + " (" + KB + " KB)</a></div>";

    container.innerHTML += anchor;
};

var computedState;
function renderClips() {
    computedState = {
        selected: -1,
        noneSelected: true
    };

    var clipsNode = document.getElementById("clips");

    function table(x) {
        return "<table>" + x + "</table>";
    }
    function tr(x) {
        return "<tr>" + x + "</tr>";
    }
    function td(x) {
        return "<td>" + x + "</td>";
    }
    function th(x) {
        return "<th>" + x + "</th>";
    }
    function playButton(i) {
        action = 'AudioRecorder.playClip(clips[' + i + '])';
        return actionButton(action);
    }
    function selectButton(i) {
        action = 'AudioRecorder.setClip(clips[' + i + '])';
        return actionButton(action);
    }
    function downloadButton(i) {
        action = 'addDownloadLink(clips[' + i + '], \'clip' + i + '\')';
        return actionButton(action);
    }
    function convertButton(i) {
        action = 'clips.push(Clip.createFromSpeex(clips[' + i + '].speex))';
        return actionButton(action);
    }
    function actionButton(action) {
        return '<button onclick="' + action +'; renderClips();">' + action +' </button>';
    }

    var clipsHtml = "Clips:";
    if (clips.length > 0) {
        var hdr = "";
        hdr += th("selected");
        hdr += th("id");
        hdr += th("finalized");
        hdr += th("select");
        hdr += th("length (ms)");
        hdr += th("PCM Samples (32 bit)");
        hdr += th("Speex Samples (8 bit)");
        hdr += th("Play");
        hdr += th("Decode from Speex");
        hdr += th("Experimental Download");
        clipsHtml += tr(hdr);
        for (var i = 0; i < clips.length; i++) {
            var selected = AudioRecorder.getClip() === clips[i];
            if (selected) {
                computedState.selected = i;
                computedState.noneSelected = false;
            }

            var length = Math.round(Clip.getLength(clips[i]) * 100) / 100;

            var row = "";
            row += td(selected ? 'Yes' : 'No');
            row += td(i);
            row += td(clips[i].finalized ? 'Yes' : 'No');
            row += td(selectButton(i));
            row += td(length);
            row += td(clips[i].samples.length);
            row += td(clips[i].speex.length);
            row += td(playButton(i));
            row += td(convertButton(i));
            row += td(downloadButton(i));
            clipsHtml += tr(row);
        }
        clipsHtml = table(clipsHtml);
    } else {
        clipsHtml = "<i>You have not created any clips yet.</i>";
    }

    clipsNode.innerHTML = clipsHtml;
}
        </script>
    </head>
    <body>
        Click a button to run the command.
        <p>
        <button onclick="initClicked()">
            AudioRecorder.init(config)
        </button>
        <button onclick="createClicked()">
            clips.push(Clip.create())
        </button>

        <div id="clips"></div>

        <p>
        <button class="needs_init" onclick="recordClicked();">
            AudioRecorder.record()*
        </button>
        <button class="needs_init"  onclick="stopRecordingClicked();">
            AudioRecorder.stopRecording(callback)
        </button>

        <p>
        <button class="needs_clip" onclick="stopPlayingClicked();">
            AudioRecorder.stopPlaying()
        </button>

        <div class="downloads"></div>

        <p>
        To run this example locally, from the AudioRecorder directory run the command:<br/>
        python -m SimpleHTTPServer 8081<br/>
        Then visit <a href="http://localhost:8081/examples/recorder.html">http://localhost:8081/examples/recorder.html</a>.<br/>
        Or do the equivalent on your system... but it won't work if you just open the local file recorder.html in a browser.

        <p>
        *In addition to running AudioRecorder.record(), this button calls clips.push(AudioRecorder.getClip()) if necessary.
    </body>
    <script type="text/javascript">
        renderClips();
        setInterval(renderClips, 2000);
    </script>
</html>
